<template>
  <q-page class="page">
    <div class="flex items-center justify-between q-py-xs">
      <div class="center" style="width: 50px">
        <q-btn icon="arrow_back" unelevated round @click="back" />
      </div>
      <div
        class="flex-1 center text-center"
        style="width: 100px; font-weight: bold; font-size: 16px"
      ></div>
      <div class="" style="width: 50px"></div>
    </div>

    <div class="q-mt-md q-px-md">
      <div style="font-size: 26px">实名认证</div>
      <div style="color: #999" class="q-mt-sm">
        根据《中华人民共和国反洗钱法》等法律的要求，您需提供姓名和身份证号进行实名认证，以便更好的享受相关金融服务
      </div>

      <div class="q-pa-md q-mt-lg" style="background-color: #f7f9fa; border-radius: 8px">
        <div class="flex items-center" style="font-size: 16px">
          <div class="label" style="width: 80px">姓名</div>
          <div class="flex-1" style="width: 40px">
            <input
              type="text"
              v-model="name"
              placeholder="填写真实姓名"
              class="input-nostyle"
              style="width: 100%"
            />
          </div>
        </div>
        <div class="line q-my-sm" style="height: 1.5px; background-color: #eaebec"></div>
        <div class="flex items-center" style="font-size: 16px">
          <div class="label" style="width: 80px">身份证</div>
          <div class="flex-1" style="width: 40px">
            <input
              type="text"
              v-model="idCard"
              placeholder="填写本人身份证号"
              class="input-nostyle"
              style="width: 100%"
            />
          </div>
        </div>
      </div>

      <div class="q-mt-sm">
        <q-btn
          label="同意协议并认证"
          padding="none none"
          unelevated
          rounded
          :loading="loading"
          @click="submit"
          :disable="!isInputOk"
          class="full-width q-mt-lg"
          style="
            background-color: #FFAD13;
            color: #fff;
            padding: 11px 18px !important;
            font-size: 16px;
            font-weight: 600;
          "
        />
      </div>

      <div class="q-mt-md" style="color: #999999; font-size: 13px">
        <div class="">
          阅读并同意
          <span
            style="color: #ffb401; cursor: pointer"
            @click="useWebView().goTo('实名认证服务协议', useProtocolLink().realNameAuthentication)"
            >《实名认证服务协议》</span
          >
        </div>
        <div class="" style="word-break: break-all">
          在您使用金融相关服务时，为保障账户及资金安全，根据《中华人民共和国反洗钱法》等法律的要求，需要您授权或填写相关身份信息用于实名认证
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { updateAuthInfoApi } from 'src/api/auth';
import { useAppStore } from 'src/stores/app-store';
import { showLoadingToast, showSuccessToast, showToast } from 'vant';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useWebView } from '../webview/webview';
import { useProtocolLink } from 'src/config/protocol_link';

const router = useRouter();
const route = useRoute();
const back = () => {
  router.back();
};
const name = ref();
const idCard = ref();

const isInputOk = computed(() => !!name.value && !!idCard.value);

const loading = ref(false);

const submit = async () => {
  loading.value = true;
  await useAppStore()
    .updateAuthInfo(idCard.value, name.value)
    .finally(() => (loading.value = false));
  router.replace({path: '/infoInput', query: route.query});
};
</script>

<style lang="scss" scoped>
.input-box {
  textarea {
    border: 1px solid #4461e2;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
  }
}
</style>
